<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
            const sleep = (s) => {
                return new Promise((resolve) => {
                    setTimeout(() => {
                        resolve(s)
                    }, s * 1000)
                })
            }

            async function func1() {
                const res1 = await sleep(1) 
                console.log('res1:', res1)
                const res2 = await sleep(3) 
                console.log('res2:', res2)
 
            }

            async function func2() {
                // await func1()
                const res3 = await sleep(2) 
                console.log('res3:', res3)
                const res4 = await sleep(4) 
                console.log('res4:', res4)
            }

            // await 阻塞的是async function里面的代码，不会阻塞外面的函数的执行 
            // console.log('top')
            func1() // func1 是用async修饰了，是promise，内部又有await，异步的
            func2()
            // console.log('bottom')

            // Q: 我想 func1 执行完，再执行func2? 

            // async function func3(){
            //     await func1()
            //     await func2()
            // }
            // func3()

            func1().then(res => {
                func2()
            })

            ;(async () => {
                await func1()
                await func2()
            })()



    </script>
</body>
</html>